<template>
  <div class="registered">
    <div class="registered__headed">
      <div class="registered__left">
        <div @click="left"><i class="iconfont icon852zuojiantou"></i></div>
        <div>手机号注册</div>
      </div>
    </div>
    <div class="registered__inp">
      <van-cell-group name='abc'>
        <van-field
          v-model="username"
          label="用户名"
          placeholder="请输入用户名"
        />
        <van-field
          v-model="phone"
          label="密码"
          placeholder="请输入密码"
        />
      </van-cell-group>
    </div>
    <div class="registered__btn" @click="reg">
      注册
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import { Field } from 'vant'
Vue.use(Field)

export default {
  name: 'registered',
  methods: {
    left () {
      this.$router.push('/loginregistered')
    },
    reg () {
      let user = this.username
      let phone = this.phone
      if (user && phone) {
        axios.post('/regY', {
          username: user,
          password: phone
        }).then(data => {
          console.log(data)
          if (data.data.code === '1') {
            this.username = ''
            this.phone = ''
            this.$router.push('/loginregistered/login')
          } else {
            console.log(data.data.msg)
            this.username = ''
            this.phone = ''
          }
        })
      } else {
        console.log('用户名或密码不能为空')
      }
    }
  },
  data () {
    return {
      username: '',
      phone: ''
    }
  }
}
</script>

<style lang="scss">
  .registered{
    .registered__headed{
      width: 100%;
      height: 45px;
      background: #ce3d3e;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .registered__left{
        width: 150px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #fff;
      }
      .registered__right{
        margin-right: 8px;
        color: #fff;
      }
    }
    .registered__inp{
      margin-top: 22.5px;
      margin-bottom: 28.5px;
    }
    .registered__btn{
      width: 360px;
      height: 37.5px;
      border-radius: 2px;
      background: #ce3d3a;
      margin: 0 auto;
      text-align: center;
      line-height: 37.5px;
      color: #fff;
    }
  }
</style>
